{% extends "base/base.html" %}
{% load staticfiles %}

{% block customizedCSS %}
<!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/user-profile.css" type="text/css" media="screen" />

{% endblock %}


{% block content %}
        <div class="container-fluid">
            <div id="pad-wrapper" class="user-profile">
                <!-- header -->
                <div class="row-fluid header">
                    <div class="span8">
                        <img src="/static/img/salesorder_72.ico" class="avatar img-circle" />
                        <h3 class="name">订单编号: {{so.so_num}}</h3>
                        <span class="area">您可以在这里设置并保存订单信息</span>
                    </div>
                    <a class="btn-flat icon pull-right delete-user" data-toggle="tooltip" title="Delete user" data-placement="top">
                        <i class="icon-trash"></i>
                    </a>
                     <a class="btn-flat icon large pull-right edit">
                        保存订单
                    </a>
                </div>

                <div class="row-fluid profile">
                    <!-- bio, new note & orders column -->
                    <div class="span9 bio">
                        <div class="profile-box">
                            <!-- biography -->
                            <div class="span12 section">
                                <h6>订单状态：</h6>
                                <p>
                                    <select id="select_state" style="height: 28px">
                                        <option>订单已创建</option>
                                        <option>订单运输中</option>
                                        <option>已完成订单</option>
                                        <option>订单已取消</option>
                                    </select>
                                </p>
                            </div>

                            <h6>订单信息：</h6>
                            <br />
                            <!-- recent orders table -->
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th class="span2">
                                            商品名称
                                        </th>
                                        <th class="span3">
                                            <span class="line"></span>
                                            交易单价
                                        </th>
                                        <th class="span3">
                                            <span class="line"></span>
                                            数量
                                        </th>
                                        <th class="span3">
                                            <span class="line"></span>
                                            总价
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- row -->
                                   {%for item in sl%}
                                   <tr>
                                        <td><a>{{item.sl_prod.name}}</a></td>
                                        <td>{{item.sl_price}}</td>
                                        <td>{{item.sl_quantity}}</td>
                                        <td>{{item.get_amount}}</td>
                                   </tr>
                                   {%endfor%}
                                </tbody>
                            </table>

                            <!-- new comment form -->
                            <div class="span12 section comment">
                                <h6>订单备注</h6>
                                <p>你可以在这里为你的订单设置备注</p>
                                <textarea>{{so.so_note}}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- side address column -->
                    <div class="span3 address pull-right">
                        <h6 style="margin-bottom: 10px;">订单客户</h6>
                        <ul>
                            <li><a>{{so.so_cust.account_name}}</a></li>
                        </ul>

                        <h6 style="margin-bottom: 10px;">地址</h6>
                        <ul>
                            <li>{{so.so_cust.province}}</li>
                            <li>{{so.so_cust.city}}</li>
                            <li>{{so.so_cust.area}}</li>
                            <li>{{so.so_cust.street}}</li>
                            <li class="ico-li">
                                <i class="ico-phone"></i>
                                <a>{{so.so_cust.phone | default:"无记录"}}<a>
                            </li>
                             <li class="ico-li">
                                <a>{{so.so_cust.qq}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
  {% endblock %}

{% block customizedJS %}
    <script type="text/javascript">
        window.onload = function(){
            //设置订单状态
            setState({{so.so_state}});
        }

        function setState(state){
            var select=$("#select_state")
            if(state==0){
                select.val("订单已创建");
            }else if(state==1){
                select.val("订单运输中");
            }else if(state==2){
                select.val("已完成订单");
            }else{
                select.val("订单已取消");
            }
        }
    </script>
{% endblock %}
